<template>
  <el-dialog
    :title="isEdit ? '编辑' : '添加记录'"
    :visible.sync="visible"
    @open="clearForm"
    :before-close="handleClose">
    <p style="margin-bottom:22px;">
      请输入学员基础身体数据信息
      <span class="small record-date">
        记录日期：
        <el-date-picker
            class="small link my-date-picker"
            v-model="recordDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </span>
    </p>
    <el-form  label-width="100px"
      :model="form" :rules="rules" ref="form">
      <el-form-item
        v-for="(item,index) in category"
        :key="item.categoryName"
        :label="item.categoryName" 
        :prop="item.categoryName"
        :rules="[
          Object.assign({}, validator.rule.customValidate, {
            type: item.categoryName, 
            min: mapNameToValue(category,item,'minValue'), 
            max:mapNameToValue(category,item,'maxValue'), 
            unit: mapNameToValue(category,item,'unitName')
          })
        ]">
        <el-input-number  :bit="0.01" v-model="form[item.categoryName]" >
          <template slot="append">{{mapNameToValue(category,item,'unitName')}}</template>
        </el-input-number>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save()">保  存</el-button>
    </span>        
  </el-dialog>
</template>
<script>
import validator from 'utils/validator'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: function () {
        return []
      }
    },
    recordDate: {
      type: [Number, Date]
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    category: {
      type: Array
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },
  watch: {
    form (f) {
      this.form.recordDate = this.recordDate || ''
    }
  },
  data () {
    let form = {}
    this.category.forEach((cate, index) => {
      let value = this.data.find(item => {
        return item.categoryId === cate.categoryId
      })
      form[cate.categoryName] = value ? value.dataValue : ''
    })
    return {
      rules: {},
      validator,
      form,
      specialItem: '坐位体前屈'
    }
  },
  methods: {
    save () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let values = Object.entries(this.form)
          let entrys = []
          let special = []
          values.forEach(item => {
            if (item.indexOf(this.specialItem) === -1) {
              entrys.push(item)
            } else {
              special.push(item)
            }
          })
          let hasWritten = entrys.some(item => {
            return item[1] !== 0
          })
          if (!hasWritten && !special.length) {
            this.$message({
              message: '请至少输入一项',
              type: 'warning'
            })
            return false
          }
          if (!this.recordDate) {
            this.$message({
              message: '请选择日期',
              type: 'warning'
            })
            return false
          }
          let dataList = []
          let keys = Object.keys(this.form)
          this.category.forEach(cate => {
            keys.forEach(key => {
              if (key === cate.categoryName && this.form[key] !== 0 && key !== this.specialItem) {
                dataList.push({
                  categoryId: cate.categoryId,
                  dataValue: this.form[key]
                })
              }
              if (key === this.specialItem && key === cate.categoryName) { // 座位体前屈可以为小于0的值，分开处理
                dataList.push({
                  categoryId: cate.categoryId,
                  dataValue: this.form[key]
                })
              }
            })
          })
          this.$emit('submit', {
            recordDate: this.recordDate,
            bodyDataDetailJson: JSON.stringify(dataList)
          })
        } else {
          return false
        }
      })
    },
    clearForm () {
      this.form = {}
      // 清除验证提示
      this.$refs.form && this.$refs.form.resetFields()
    },
    handleClose () {
      if (this.visible) {
        this.$emit('update:visible', false) // 更新父组件的状态
        this.$emit('close')
      }
    },
    mapNameToValue (list, data, key) {
      let cate = list.find(item => {
        return data.categoryId === item.categoryId
      })
      return cate[key]
    }
  }
}
</script>
<style lang="scss">
.record-date{
  color: #3983e5;
}
.my-date-picker{
  input.el-input__inner{
    border: 0;
    color:#3983e5;
  }
  i.el-input__icon{
    display: none;
  }
}
</style>
